<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mork.js</title>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        :root {
            --brand-color:red
        }
        .div-class {
            width: 100px;
            height: 100px;
            background-color: var(--brand-color);
        } 
    </style>
</head>

<body> 
    <div class="div-class"></div>
    <script>
        /**
         * 'name|rule':value
         *      name:"名称"
         *      rule:规则
         *      value:值
         * 生成得七种规则：
         *       'name|min-max': value
         *       'name|count': value
         *       'name|min-max.dmin-dmax': value
         *       'name|min-max.dcount': value
         *       'name|count.dmin-dmax': value
         *       'name|count.dcount': value
         *       'name|+step': value
         * */

        // 生成 数组
        var arr = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'list|1-10': [{
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'id|+1': 0,
                'name|1': "tom",
                'age|1-20': 1,
                "weight|80-200.0-2": 1.123,
                "sex|1": false,
                "isEat|1": { eat: "Y", no_eat: "N" },
                "hobby|1-2": { hobby_1: "run", hobby_2: "eat", hobby_3: "other" },
                'is_dan_qin|1': ["Y", "N"],
                "family_num|+1": [1, 2, 3, 4, 5, 6],
                "family_peoper|1-8": ['bb', 'mm', 'yy', 'nn', 'yg', 'yp'],
                'arr_Ramber|6': [1, 2, 3, 5, 7],
                'regexp3': /\d{5,10}/,
                my_name: {
                    first: '@FIRST',
                    middle: '@FIRST',
                    last: '@LAST',
                    full: '@first @middle @last'
                }
            }]
        })

        // 生成 string
        let str = Mock.mock({
            "str|1-3": "tom"
        })
        let str_1 = Mock.mock({
            "str|1": "tom"
        })

        // 生成 number
        let num = Mock.mock({
            "id|+1": 0  // 自增
        })
        let num_1 = Mock.mock({
            "age|1-20": 1
        })
        let num_2 = Mock.mock({
            "weight|80-200.0-2": 1.123
        })

        // 生成随机布尔值
        let bool = Mock.mock({
            "sex|1": false
        })

        // 生成 Object
        let obj = Mock.mock({
            "isEat|1": { eat: "Y", no_eat: "N" }
        })
        let obj_1 = Mock.mock({
            "hobby|1-2": { hobby_1: "run", hobby_2: "eat", hobby_3: "other" }
        })

        // Array
        let new_arr = Mock.mock({
            'is_dan_qin|1': ["Y", "N"]
        })
        let arr_1 = Mock.mock({
            "family_num|+1": [1, 2, 3, 4, 5, 6]
        })
        let arr_2 = Mock.mock({
            "family_peoper|1-8": ['bb', 'mm', 'yy', 'nn', 'yg', 'yp']
        })
        let arr_3 = Mock.mock({
            'arr_Ramber|6': [1, 2, 3, 5, 7]
        })

        // 正则表达式
        let reg = Mock.mock({
            'regexp3': /\d{5,10}/
        })

        // 占位符
        let zwf = Mock.mock({
            my_name: {
                first: '@FIRST',
                middle: '@FIRST',
                last: '@LAST',
                full: '@first @middle @last'
            }
        })

        // 配置 mork 路径
        Mock.mock('http://www.yy.com', arr)

        // 请求 mork
        $.ajax({
            url: 'http://www.yy.com',
            dataType: 'json',
            success: function (data) {
                console.log(data)
            }
        })
    </script>
</body>

</html>